<template>
  <div>
    <div class="contentData">

      <div style="display: flex;justify-content: space-between;">

        <div class="shipImg">

          <img class="shipImg" :src="shopInfo.image" />

        </div>

        <div>

          <div class="title">
            公司简介
          </div>
          <div class="textTitle">
            COMPANY INTRODUCTION
          </div>

          <template v-if="shopInfo.company_info">
            <div class="contentText" v-html="shopInfo.company_info">
            </div>
          </template>
          <template v-else>
            <div class="contentText">
            </div>
          </template>

        </div>

      </div>


      <div>

        <div class="zizhi">

          <div class="xian">

          </div>

          <div class="zizhiText">
            工商资质
          </div>

        </div>


        <div>
          <table class="intro-table">
            <tr>
              <th class="thstype">企业名称</th>
              <td class="tdStype">
                {{ shopInfo.company_title }}
              </td>
              <th class="thstype">营业执照</th>
              <td class="tdStype">
                <a class="clickLook"  :href="shopInfo.license_img" target="_blank" v-if="shopInfo.license_img">点击查看</a>
              </td>
            </tr>
            <tr>
              <th class="thstype">统一社会信用代码</th>
              <td class="tdStype">{{ shopInfo.usci }}
              </td>
              <th class="thstype">纳税人识别号</th>
              <td class="tdStype">
                {{ shopInfo.taxpayer }}
              </td>
            </tr>

            <tr>
              <th class="thstype">法定代表人</th>
              <td class="tdStype">{{ shopInfo.legal }}
              </td>
              <th class="thstype">成立时间</th>
              <td class="tdStype">
                {{ shopInfo.setup_time }}
              </td>
            </tr>

            <tr>
              <th class="thstype">审核/年检日期</th>
              <td class="tdStype">{{ shopInfo.annual_time }}
              </td>
              <th class="thstype">注册资本</th>
              <td class="tdStype">

                {{ shopInfo.reg_money }}
              </td>
            </tr>

            <tr>
              <th class="thstype">注册地址</th>
              <td class="tdStype">
                {{ shopInfo.reg_address }}
              </td>
              <th class="thstype">登记机关</th>
              <td class="tdStype">

                {{ shopInfo.reg_organ }}
              </td>
            </tr>

            <tr>
              <th class="thstype">经营范围</th>
              <td>
                {{ shopInfo.sale_range }}
              </td>

            </tr>

          </table>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "intro",
  computed: {
    ...mapState([
      "userInfo",
    ]),
  },
  data() {
    return {
      shopInfo: {}
    }
  },
  created() {
    if (this.$route.query.shop_id) {
      this.shop_id = this.$route.query.shop_id
    } else {
      this.shop_id = this.userInfo.id
    }
    this.getData();
  },
  methods: {
    getData() {
      this.$httpApi("/api/shopInfo", {
        shop_id: this.shop_id
      }, 'get').then(res => {
        this.shopInfo = res.data;

      })
    }
  }
}

</script>

<style lang="less" scoped>
.clickLook {
  font-weight: 400;
  font-size: 14px;
  color: #2F9CFB;
  text-align: left;
  font-style: normal;
  text-decoration-line: underline;
  cursor: pointer;
}

.zizhiText {
  padding-left: 12px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #000000;
  line-height: 40px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.xian {
  width: 5px;
  height: 16px;
  background: #333333;
  border-radius: 6px 6px 6px 6px;
}

.zizhi {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-top: 51px;
}

.shipImg {
  width: 470px;
  height: 343px;
  margin-top: 55px;
}

.contentData {
  width: 1530px;
  margin: auto;
  background-color: #fff;
  min-height: 951px;
  margin-top: 30px;
  margin-bottom: 40px;
  padding: 50px 100px 30px 100px;
}

.tdStype {
  min-width: 389px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #222222;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.thstype {
  min-width: 238px;
  // height: 44px;
  background: #FAFAFA;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #E8E8E8;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #676767;
  line-height: 17px;
  font-style: normal;
  text-transform: none;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.intro-table {
  min-width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.intro-table th,
.intro-table td {
  border: 1px solid #ccc;
  padding: 18px;
}

.contentText {
  width: 830px;
  margin-top: 40px;
  min-height: 340px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 15px;
}

.textTitle {
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 16px;
  color: #999999;
  text-align: left;
  font-style: normal;
  text-transform: none;

}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 36px;
  color: #0A0A0A;
  text-align: left;
  font-style: normal;
  text-transform: none;
  padding-left: 32px;
  margin-bottom: 8px;
}
</style>